<template>
  <div class="custom-select">
    <select :value="value"  @change="chaneCity">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
  },
methods: {
  chaneCity(e) {
    this.$emit("input", e.target.value);
  },
},
}
</script>




<style>
.custom-select {
  position: relative;
  display: inline-block;
  width: 200px;
}

.custom-select select {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  appearance: none; /* 去掉默认的箭头 */
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="#333" d="M2 0L0 2h4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 10px;
  cursor: pointer;
}

.custom-select select:focus {
  border-color: #66afe9;
  outline: none;
}
</style>